<template>
    <el-autocomplete
            v-model="this.selectLabel"
            :placeholder="placeholder"
            :trigger-on-focus="false"
            style="width: 100%"
            clearable
            :fetch-suggestions="querySearchAsync"
            @select="handleSelect"
            popper-class="platform-auto-complete"
        >
        <template #suffix>
            <el-icon class="el-input__icon">
                <search />
            </el-icon>
        </template>
        
        <template #default="{ item }">
            <el-row class="rowStyle"  v-if="orgType=='1'">
                <el-col :span="4">{{item.purchaseUnityCode}}</el-col>
                <el-col :span="6">{{item.purchaseUnityName}}</el-col>
                <el-col :span="4">{{item.realName}}</el-col>
                <el-col :span="6">{{item.mobile}}</el-col>
            </el-row>
            <el-row class="rowStyle" v-else-if="orgType=='2'">
                <el-col :span="4">{{item.storeCode}}</el-col>
                <el-col :span="6">{{item.storeName}}</el-col>
                <el-col :span="4">{{item.realName}}</el-col>
                <el-col :span="6">{{item.mobile}}</el-col>
            </el-row>
            <el-row class="rowStyle" v-else-if="orgType=='3'">
                <el-col :span="4">{{item.supplierCode}}</el-col>
                <el-col :span="6">{{item.supplierName}}</el-col>
                <el-col :span="4">{{item.realName}}</el-col>
                <el-col :span="6">{{item.mobile}}</el-col>
            </el-row>
            <el-row class="rowStyle" v-else-if="orgType=='0'">
                <el-col :span="4">{{item.supplierCode}}</el-col>
                <el-col :span="6">{{item.supplierName}}</el-col>
                <el-col :span="4">{{item.realName}}</el-col>
                <el-col :span="6">{{item.mobile}}</el-col>
            </el-row>
        </template>
    </el-autocomplete>
</template>
<script>
export default {
    name: "autocomplete",
    props: {
        placeholder: { type: String, default: "---请输入关键词---" },
        queryType: { type: String, default: "" },
        orgType: { type: String, default: "" },
    },
    data() {
        return {
            selectLabel:"",
        };
    },
    watch: {
        queryType: {
            handler(newVal,oldVal) { 
                console.log("queryType",newVal);
                //this.queryType = { ...this.queryType,...newVal }; 
            },
        }
    },
    methods: {
        async querySearchAsync(queryString, cb)
        {
            if(this.selectLabel)
            {
                try {
                    var obj={};
                    var searchName="";
                    if(this.orgType=="1") { searchName="purchaseUnityName";}
                    else if(this.orgType=="2"){ searchName="storeName";}
                    else if(this.orgType=="3"){ searchName="supplierName";}
                    else if(this.orgType=="0"){ searchName="orgName";}
                    console.log(searchName)
                    obj[searchName]=queryString;

                    var returnValue = await this.$API.auth.PostProcessApi.post(this.queryType,obj);
                    if (returnValue.status == 200) {
                        cb(returnValue.response)
                    } else {
                        //this.$message.error("操作失败:" + returnValue.msg);
                    }

                } catch (error) {
                    this.loading = false;
                }
                
            }
            
        },
        handleSelect(item)
        {
            this.$emit("handleSelect", item);
        }
        
    },
}
</script>
<style lang="scss">
.platform-auto-complete{
    .el-autocomplete-suggestion__wrap {
        height:400px;
        margin: 10px;
    }
    

}
.rowStyle{
    width: 500px;
    border-bottom: 1px solid #ebeef5;
}

</style>